import { Graph } from '@antv/x6'
import { ports } from './ports'

export const NODE_HEIGHT = 36

export const NODE_BORDER_COLOR = '#00BAFF'

export function registerNodes() {
  Graph.registerNode(
    'custom-rect',
    {
      inherit: 'rect',
      width: 78,
      height: 48,
      attrs: {
        body: {
          strokeWidth: 1,
          stroke: NODE_BORDER_COLOR,
          fill: 'transparent',
        },
        text: {
          fontSize: 12,
          fill: '#86BFF0',
          textWrap: {
            ellipsis: true,
            breakWord: true,
          }
        },
      },
      ports: { ...ports },
    },
    true
  )

  Graph.registerNode(
    'custom-polygon',
    {
      inherit: 'polygon',
      width: 78,
      height: 48,
      attrs: {
        body: {
          strokeWidth: 1,
          stroke: NODE_BORDER_COLOR,
          fill: 'transparent',
        },
        text: {
          fontSize: 12,
          fill: '#86BFF0',
          textWrap: {
            ellipsis: true,
            breakWord: true,
          }
        },
      },
      ports: {
        ...ports,
      },
    },
    true
  )

  Graph.registerNode(
    'custom-circle',
    {
      inherit: 'circle',
      width: 48,
      height: 48,
      attrs: {
        body: {
          strokeWidth: 1,
          stroke: NODE_BORDER_COLOR,
          fill: 'transparent',
        },
        text: {
          fontSize: 12,
          fill: '#86BFF0',
          textWrap: {
            ellipsis: true,
            breakWord: true,
          }
        },
      },
      ports: { ...ports },
    },
    true
  )

  Graph.registerNode(
    'custom-image',
    {
      inherit: 'rect',
      width: 78,
      height: 48,
      markup: [
        {
          tagName: 'rect',
          selector: 'body',
        },
        {
          tagName: 'image',
        },
        {
          tagName: 'text',
          selector: 'label',
        },
      ],
      attrs: {
        body: {
          strokeWidth: 1,
          stroke: NODE_BORDER_COLOR,
          fill: 'transparent',
        },
        image: {
          width: 20,
          height: 20,
          refX: 29,
          refY: 5,
        },
        label: {
          refY: 34,
          height: 12,
          fontSize: 12,
          fill: '#86BFF0',
          textWrap: {
            ellipsis: true,
            breakWord: true,
          }
        },
      },
      ports: { ...ports },
    },
    true
  )
}

export const ksConfig = (label) => {
  return {
    shape: 'custom-rect',
    label: label || '开始',
    attrs: {
      body: {
        rx: 20,
        ry: 26,
      },
    },
  }
}

export const gcConfig = (label) => {
  return Object.assign({
    shape: 'custom-rect',
    label: label || '过程',
  })
}

export const kxgcConfig = (label) => {
  return {
    shape: 'custom-rect',
    label: label || '可选过程',
    attrs: {
      body: {
        rx: 6,
        ry: 6,
      },
    },
  }
}

export const jcConfig = (label) => {
  return {
    shape: 'custom-polygon',
    attrs: {
      body: {
        refPoints: '0,10 10,0 20,10 10,20',
      },
    },
    label: label || '决策',
  }
}

export const sjConfig = (label) => {
  return {
    shape: 'custom-polygon',
    attrs: {
      body: {
        refPoints: '10,0 40,0 30,20 0,20',
      },
    },
    label: label || '数据',
  }
}

export const ljConfig = (label) => {
  return {
    shape: 'custom-circle',
    label: label || '连接',
  }
}

export const imageConfig = (label, icon) => {
  return {
    shape: 'custom-image',
    label,
    attrs: {
      image: {
        'xlink:href': `/api/sys/attach/download?attachId=${icon}`,
      },
    },
  }
}

// 内置icon形状，用固定组件，其它组件使用图标组件
let buildIconComMap = {
  ks: ksConfig,
  gc: gcConfig,
  kxgc: kxgcConfig,
  jc: jcConfig,
  sj: sjConfig,
  lj: ljConfig,
}
export function nodeConfigByIcon(label, icon) {
  icon = icon || 'gc'
  if (buildIconComMap[icon]) {
    return buildIconComMap[icon](label)
  } else {
    return imageConfig(label, icon)
  }
}

export const toolPlusButton = [
  {
    tagName: 'circle',
    selector: 'button',
    attrs: {
      fill: NODE_BORDER_COLOR,
      stroke: 'none',
      r: 8,
      height: 16,
      width: 16,
      cursor: 'pointer'
    },
  },
  {
    tagName: 'path',
    attrs: {
      stroke: '#FFFFFF',
      d: 'M 1 5 9 5 M 5 1 5 9',
      strokeWidth: 1.6,
      transform: 'translate(-5, -5)'
    },
  },
]

export const toolMinusButton = [
  {
    tagName: 'circle',
    selector: 'button',
    attrs: {
      fill: NODE_BORDER_COLOR,
      stroke: 'none',
      r: 8,
      height: 16,
      width: 16,
      cursor: 'pointer'
    },
  },
  {
    tagName: 'path',
    selector: 'buttonSign',
    attrs: {
      stroke: '#FFFFFF',
      d: 'M 2 5 8 5',
      strokeWidth: 1.8,
      transform: 'translate(-5, -5)'
    },
  },
]
